<template>
	<a-drawer
		title="盘库记录"
		:width="900"
		:visible="visible"
		:destroy-on-close="true"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
	>
		<a-card :bordered="false">
			<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form mb-4">
				<a-row :gutter="24">
					<a-col :span="9">
						<a-form-item label="物品名称" name="goodsName">
							<a-input v-model:value="searchFormState.goodsName" placeholder="请输入物品名称" />
						</a-form-item>
					</a-col>
					<a-col :span="9">
						<a-form-item label="物品编号" name="goodsCode">
							<a-input v-model:value="searchFormState.goodsCode" placeholder="请输入物品编号" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-button type="primary" @click="table.refresh(true)">查询</a-button>
						<a-button style="margin: 0 8px" @click="() => searchFormRef.resetFields()">重置</a-button>
					</a-col>
				</a-row>
			</a-form>
			<s-table
				ref="table"
				:columns="columns"
				:data="loadData"
				bordered
				:row-key="(record) => record.id"
				:tool-config="toolConfig"
			>
				<template #bodyCell="{ column, record, index }">
					<template v-if="column.dataIndex === 'index'">
						<span>{{index + 1}}</span>
					</template>
					<template v-if="column.dataIndex === 'consistentStorage'">
						<span>{{record.consistentStorage == 1 ? '是' : '否'}}</span>
					</template>
					<template v-if="column.dataIndex === 'leaveFlag'">
						<span>{{record.leaveFlag == 1 ? '是' : '否'}}</span>
					</template>
					<template v-if="column.dataIndex === 'cabinet'">
						<span>{{record.bioCabinetGroupName}} {{record.bioCabinetName}} {{record.bioCabinetDoorName}}</span>
					</template>
					<template v-if="column.dataIndex === 'state'">
						<!-- 0-已报废 1-启用 2-维修中-->
						<span v-if="record.state == 0">已报废</span>
						<span v-if="record.state == 1">启用</span>
						<span v-if="record.state == 2">维修中</span>
					</template>
				</template>
			</s-table>
		</a-card>
	</a-drawer>
</template>

<script setup name="bizinventorycheckdetail">
	import { cloneDeep } from 'lodash-es'
    import { message } from 'ant-design-vue'
    import bizInventoryCheckDetailApi from '@/api/biz/bizInventoryCheckDetailApi'
    let searchFormState = reactive({})
	const visible = ref(false)
    const searchFormRef = ref()
    const table = ref()
    const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
    const columns = [
		{
			title: "序号",
			dataIndex: 'index',
			ellipsis: true,
			width: '60px'
		},
        {
            title: '物品名称',
            dataIndex: 'goodsName',
            ellipsis: true,
			width:'150px'
        },
		{
			title: '物品编号',
			dataIndex: 'goodsCode',
			ellipsis: true,
			width:'100px'
		},
		{
			title: '存放处',
			dataIndex: 'cabinet',
			ellipsis: true
		},
        {
            title: '存放一致',
            dataIndex: 'consistentStorage',
            ellipsis: true,
			width:'80px'
        },
        {
            title: '是否离柜',
            dataIndex: 'leaveFlag',
            ellipsis: true,
			width:'80px'
        },
        {
            title: '状态',
            dataIndex: 'state',
            ellipsis: true,
			width:'80px'
        },
    ]
	// 打开抽屉
	const onOpen = (inventoryCheckId) => {
		visible.value = true
		if (inventoryCheckId) {
			searchFormState.inventoryCheckId = inventoryCheckId
		}
	}
	// 关闭抽屉
	const onClose = () => {
		searchFormRef.value = {}
		visible.value = false
	}

    const loadData = (parameter) => {
        const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
        return bizInventoryCheckDetailApi.bizInventoryCheckDetailPage(Object.assign(parameter, searchFormParam)).then((data) => {
            return data
        })
    }

	// 抛出函数
	defineExpose({
		onOpen
	})
</script>
